<template>
  <div class="ft h-100 px-10 d-flex flex-column">
    <div class="ft-b"></div>
    <div class="d-flex flex-column" v-if="curAsIndex==1">
      <div class="ft-title">
        <CommonCard>
          <div class="h-100 w-100 d-flex ai-center jc-center">
            <div class="ft-title-text ft-title-text-1"></div>
          </div>
        </CommonCard>
      </div>
      <div class="ft-as ft-as-1" @click="handleAs('a')"></div>
      <div class="ft-as ft-as-2" @click="handleAs('b')"></div>
      <div class="ft-as ft-as-3" @click="handleAs('c')"></div>
    </div>

    <div class="d-flex flex-column" v-if="curAsIndex==2">
      <div class="ft-title">
        <CommonCard>
          <div class="h-100 w-100 d-flex ai-center jc-center">
            <div class="ft-title-text ft-title-text-2"></div>
          </div>
        </CommonCard>
      </div>
      <div class="ft-as ft2-as-1" @click="handleAs('a')"></div>
      <div class="ft-as ft2-as-2" @click="handleAs('b')"></div>
      <div class="ft-as ft2-as-3" @click="handleAs('c')"></div>
    </div>

       <div class="d-flex flex-column" v-if="curAsIndex==3">
      <div class="ft-title">
        <CommonCard>
          <div class="h-100 w-100 d-flex ai-center jc-center">
            <div class="ft-title-text ft-title-text-3"></div>
          </div>
        </CommonCard>
      </div>
      <div class="ft-as ft3-as-1" @click="handleAs('a')"></div>
      <div class="ft-as ft3-as-2" @click="handleAs('b')"></div>
      <div class="ft-as ft3-as-3" @click="handleAs('c')"></div>
    </div>
  </div>
</template>

<script>
import CommonCard from "@/components/CommonCard.vue";

import { getToken } from "@/api/user.js";
export default {
  name: "Ft",
  data() {
      this.answers = {
          '1':{
              't':'c'
          },
           '2':{
              't':'a'
          },
           '3':{
              't':'b'
          },

      }
    return {
      curAsIndex: 1
    };
  },
  components: {
    CommonCard
  },methods:{
      handleAs(as){
            if(as == this.answers[this.curAsIndex].t){
               if(this.curAsIndex==3){
  this.$router.push('/dashboard/ss')
               }else {
                  this.curAsIndex++;
               }
            }else {
                this.$router.push('/dashboard/sb')
            }
      }
  },
  mounted(){
    getToken()
  }
};
</script>

<style lang="scss" scoped>
.ft {
  background: rgba(0, 0, 0, 0.4);
}
.ft-b {
  width: 3.9rem;
  height: 1.9rem;
  background-image: url(../../assets/images/ky/ky1b.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: -0.8rem;
}
.ft-title {
  margin-top: 0.8rem;
    width: 100%;
    height: 4.6rem;
 
  margin-bottom: 1rem;
}

.ft-title-text {
  width: 6.2rem;
  height: 1.3rem;
 
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ft-title-text-1 {
      width: 5.1rem;
   height: .4rem;
  background-image: url(../../assets/images/ky/ky1title.png);

}

.ft-title-text-2 {
     width: 5.9rem;
   height: .4rem;
  background-image: url(../../assets/images/ky/ky2title.png);

}

.ft-title-text-3 {
     width:6rem;
   height: .9rem;
  background-image: url(../../assets/images/ky/ky3title.png);

}
.ft-as {
  width: 5.1rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  &.ft-as-1 {
    background-image: url(../../assets/images/ky/ky1as1.png);
  }
  &.ft-as-2 {
    background-image: url(../../assets/images/ky/ky1as2.png);
  }
  &.ft-as-3 {
   width:6.6rem;
    background-image: url(../../assets/images/ky/ky1as3.png);
  }

    &.ft2-as-1 {
      width: 3.9rem;
    background-image: url(../../assets/images/ky/ky2as1.png);
  }
  &.ft2-as-2 {
     width: 3.9rem;
    background-image: url(../../assets/images/ky/ky2as2.png);
  }
  &.ft2-as-3 {
     width: 3.9rem;
    // width: 7.3rem;
    background-image: url(../../assets/images/ky/ky2as3.png);
  }


      &.ft3-as-1 {
           width: 5.8rem;
    background-image: url(../../assets/images/ky/ky3as1.png);
  }
  &.ft3-as-2 {
        width: 5.8rem;
    background-image: url(../../assets/images/ky/ky3as2.png);
  }
  &.ft3-as-3 {
    width:4.3rem;
    background-image: url(../../assets/images/ky/ky3as3.png);
  }
}
</style>